```svelte
<script lang="ts">
  import * as slider from "@zag-js/slider"
  import { normalizeProps, useMachine } from "@zag-js/svelte"

  const id = $props.id()
  const service = useMachine(slider.machine, {
    id,
    defaultValue: [0],
  })
  const api = $derived(slider.connect(service, normalizeProps))
</script>

<div {...api.getRootProps()}>
  <div>
    <label {...api.getLabelProps()}>Slider Label</label>
    <output {...api.getValueTextProps()}>{api.value.at(0)}</output>
  </div>
  <div {...api.getControlProps()}>
    <div {...api.getTrackProps()}>
      <div {...api.getRangeProps()}></div>
    </div>
    {#each api.value as _, index}
      <div {...api.getThumbProps({ index })}>
        <input {...api.getHiddenInputProps({ index })} />
      </div>
    {/each}
  </div>
</div>
```
